import { FC } from 'react'
import styles from './QuestionCard.module.scss'
import { Space, Button, Divider, Tag, Popconfirm, message, Modal } from 'antd'
import {
  EditOutlined,
  LineChartOutlined,
  StarOutlined,
  CopyOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons'
import { Link } from 'react-router-dom'
type PropsType = {
  _id: string
  title: string
  isStar: boolean
  isPublished: boolean
  answerCount: string
  createdAt: string
}

const QuestionCard: FC<PropsType> = props => {
  const { _id, title, isStar, isPublished, answerCount, createdAt } = props
  // 复制问卷
  const confirm = () => {
    message.success('复制成功！')
  }
  // 删除问卷
  const del = () => {
    Modal.confirm({
      title: '确定删除该问卷吗？',
      icon: <ExclamationCircleOutlined />,
      onOk: () => {
        message.success('删除成功！')
      },
    })
  }
  return (
    <div className={styles['question-card']}>
      <div className={styles['question-card-header']}>
        <div className={styles['question-card-header-left']}>
          <Link to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}>
            <Space>
              {isStar && <StarOutlined style={{ color: 'red' }} />}
              {title}
            </Space>
          </Link>
        </div>
        <div className={styles['question-card-header-right']}>
          <Space>
            <span>
              {isPublished ? (
                <Tag color="processing" style={{ color: 'green' }}>
                  已发布
                </Tag>
              ) : (
                <Tag>未发布</Tag>
              )}
            </span>
            <span>答卷：{answerCount}</span>
            <span>{createdAt}</span>
          </Space>
        </div>
      </div>
      <Divider style={{ margin: '12px 0' }} />
      <div className={styles['question-card-body']}>
        <div className={styles['question-card-body-left']}>
          <Space>
            <Button icon={<EditOutlined />} type="text" size="small">
              编辑问卷
            </Button>
            <Button icon={<LineChartOutlined />} type="text" size="small">
              统计数据
            </Button>
          </Space>
        </div>
        <div className={styles['question-card-body-right']}>
          <Space>
            <Button icon={<StarOutlined />} type="text" size="small">
              {isStar ? '标星' : '取消标星'}
            </Button>
            <Popconfirm title="确定复制该问卷吗?" okText="确定" cancelText="取消" onConfirm={confirm}>
              <Button icon={<CopyOutlined />} type="text" size="small">
                复制
              </Button>
            </Popconfirm>
            <Button icon={<DeleteOutlined />} type="text" size="small" onClick={del}>
              删除
            </Button>
          </Space>
        </div>
      </div>
    </div>
  )
}

export default QuestionCard
